<template>
     <div class="del_member_fixed" v-if="delMemberView">
    <div class="del_member_view">
      <div class="del_m_head">
        <h3 style="display: inline-block">删除群成员</h3>
        <img src="static/image/home/closeWindow.png" @click="$emit('update:delMemberView',false)" style="width: 14px; height: 14px; cursor: pointer" />
      </div>
      <div class="del_m_main">
        <div class="del_m_l">
          <div class="del_m_s_w">
            <input type="text" v-model="searchMember" placeholder="搜索成员" />
          </div>
          <div class="del_m_l_w" v-show="searchMember.trim() == ''">
            <template v-for="item in group_detail.users">
              <div class="d_member_item" :key="item.ID + '_member'" @click="selMemberClick(item)">
                <div class="d_member_head">
                  <img draggable="false" :src="
                        item.HEAD && item.HEAD != 'null'
                          ? $get_inline_head(item.HEAD)
                          : `static/image/home/person_${
                              item.gender == 2 ? 2 : 1
                            }.png`
                      " :onerror="defaultImg" />
                </div>
                <div class="d_member_name">{{ item.NAME }}</div>
                <span class="checkSpan" :class="{ chooseSpan: item.isChoose }" v-if="item.POSITION !== 1 && item.ID != myInfo.id"></span>
              </div>
            </template>
          </div>
          <div class="del_m_l_w" v-show="searchMember.trim() != ''">
            <template v-for="item in searchMemberList">
              <div class="d_member_item" :key="item.ID + '_smember'" @click="selMemberClick(item)">
                <div class="d_member_head">
                  <img draggable="false" :src="
                        item.HEAD && item.HEAD != 'null'
                          ? $get_inline_head(item.HEAD)
                          : `static/image/home/person_${
                              item.gender == 2 ? 2 : 1
                            }.png`
                      " :onerror="defaultImg" />
                </div>
                <div class="d_member_name">{{ item.NAME }}</div>
                <span class="checkSpan" :class="{ chooseSpan: item.isChoose }" v-if="item.POSITION !== 1 && item.ID != myInfo.id"></span>
              </div>
            </template>
          </div>
        </div>
        <div class="del_m_r">
          <div class="del_r_member">
            <template v-for="item in memberSelList">
              <div class="d_member_item" :key="item.ID + '_semember'" @click="delmemberItem(item)">
                <div class="d_member_head">
                  <img draggable="false" :src="
                        item.HEAD && item.HEAD != 'null'
                          ? $get_inline_head(item.HEAD)
                          : `static/image/home/person_${
                              item.gender == 2 ? 2 : 1
                            }.png`
                      " :onerror="defaultImg" />
                </div>
                <div class="d_member_name">{{ item.NAME }}</div>
                <span class="member_close">X</span>
              </div>
            </template>
          </div>
          <div class="del_r_btn_w">
            <div class="re_adopt" @click="delMemberBatch">确定</div>
            <div class="re_refuse" @click="refGroupMember">取消</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
           
<script>
import { delMemberBatch_axios } from "@/api/home";
export default {
  props: [
    "delMemberView",
    "group_detail",
    // "memberSelList",
    "defaultImg",
    "toInfo",
    "myInfo",
  ],
  watch: {
    searchMember() {
      if (this.searchMember.trim() != "") {
        this.searchGroupMember(this.searchMember);
      } else {
        this.searchMemberList = [];
      }
    },
  },
  data() {
    return {
      searchMemberList: [],
      memberSelList: [],
      searchMember: "",
    };
  },
  methods: {
    searchGroupMember(value) {
      this.searchMemberList = [];
      for (let i = 0; i < this.group_detail.users.length; i++) {
        if (this.group_detail.users[i].NAME.indexOf(value) != -1) {
          this.searchMemberList.push(this.group_detail.users[i]);
        }
      }
    },
    refGroupMember() {
      this.memberSelList = [];
      this.$emit("getGroupAndUsers", this.toInfo.id);
      //   this.getGroupAndUsers(this.toInfo.id);
      this.searchMember = "";
      this.$emit("update:delMemberView", false);
      //   this.delMemberView = false;
    },
    delMemberBatch() {
      //zk标注，群聊成员删除
      if (this.memberSelList.length <= 0) {
        this.$Message.warning("请先选择成员");
        return;
      }
      let memberStr = "";
      for (let i = 0; i < this.memberSelList.length; i++) {
        memberStr += this.memberSelList[i].ID + ",";
      }
      memberStr = memberStr.replace(/\,$/, "") || "";
      console.log(
        this.toInfo.id,
        this.myInfo.id,
        memberStr,
        "群id，本机id，被删除者id"
      );
      delMemberBatch_axios({
        groupid: this.toInfo.id,
        userid: this.myInfo.id,
        fuserids: memberStr,
      })
        .then((res) => {
          if (res.result == 200) {
            this.refGroupMember();
            this.$Message.success(res.msg);
          } else {
            this.$Message.success(res.msg);
          }
        })
        .catch((res) => {
          this.$Message.success("服务器出错,稍后再试3");
        });
    },

    selMemberClick(item) {
      if (item.POSITION == "1" || item.ID == this.myInfo.id) {
        return;
      }
      let result = !item.isChoose;
      this.$set(item, "isChoose", result);
      if (result) {
        // this.$emit(addMemberSelList, item);
        this.memberSelList.push(item);
      } else {
        this.delmemberItem(item);
      }
    },
    delmemberItem(item) {
      for (let i = 0; i < this.memberSelList.length; i++) {
        // if (this.memberSelList[i].ID == item.ID) {
        // //   this.$emit("delMemberSelList", i);
        // }
        this.memberSelList[i].ID == item.ID && this.memberSelList.splice(i, 1);
      }
      for (let i = 0; i < this.group_detail.users.length; i++) {
        if (this.group_detail.users[i].ID == item.ID) {
          this.$set(this.group_detail.users[i], "isChoose", false);
        }
      }
      for (let i = 0; i < this.memberSelList.length; i++) {
        if (this.memberSelList[i].ID == item.ID) {
          this.$set(this.memberSelList[i], "isChoose", false);
        }
      }
    },
  },
};
</script>
<style scoped>
</style>